<!--
 * @Author: zl
 * @Date: 2021-02-09 15:24:23
 * @LastEditTime: 2021-11-30 18:35:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3-element-admin\src\views\layoutpages\system\components\usersEdit.vue
-->
<template>
    <el-dialog
        :title="title"
        append-to-body
        destroy-on-close
        :model-value="showDialog"
        @close="closeDialog()"
    >
        <!-- <span>{{ rowData }}</span> -->
        <!-- 表单 -->
        <el-form
            :model="form"
            ref="formRef"
            :rules="rules"
            label-width="80px"
            :inline="false"
        >
            <el-form-item label="名称" prop="name">
                <el-input
                    v-model="name"
                    placeholder="字典项名称"
                    clearable
                ></el-input>
            </el-form-item>
            <el-form-item label="编码" v-if="title == '添加'" prop="code">
                <el-input
                    v-model="code"
                    placeholder="字典项编码"
                    clearable
                ></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input
                    type="textarea"
                    v-model="remark"
                    placeholder="字数限制为500个字"
                    maxlength="500"
                    clearable
                ></el-input>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-input-number
                    v-model="sort"
                    :min="0"
                    step-strictly
                    :step="1"
                ></el-input-number>
            </el-form-item>
        </el-form>

        <template v-slot:footer>
            <span>
                <el-button @click="closeDialog()">取消</el-button>
                <el-button type="primary" @click="onSubmit()">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { reactive, toRefs, ref, defineProps, defineEmits } from "vue";
const rules = {
    name: [
        {
            required: true,
            message: "请输入字段名称",
            trigger: "blur",
        },
    ],
    code: [
        {
            required: true,
            message: "请选择字段类型",
            trigger: "blur",
        },
    ],
};
const props = defineProps({
    showDialog: {
        type: Boolean,
        default: true,
    },
    title: {
        type: String,
        default: "添加",
    },
    rowData: {
        type: Object,
        default: null,
    },
});
const emit = defineEmits(["closeDialog"]);
const { title, rowData } = toRefs(props);
const closeDialog = () => {
    emit("closeDialog", false);
};
const formRef = ref(null);
const form = reactive({
    name: "",
    code: "",
    sort: 1,
    dicCode: localStorage.getItem("dicCode"),
    remark: "",
});
const { name, code, sort, remark } = toRefs(form);

/**
 * @description: 初始化
 * @param {*}
 * @return {*}
 */
rowData.value &&
    ((name.value = rowData.value.name),
    (code.value = rowData.value.code),
    (remark.value = rowData.value.remark),
    (sort.value = rowData.value.sort));
/**
 * @description:提交
 * @param {*}
 * @return {*}
 */
const onSubmit = () => {
    formRef.value.validate(async (valid) => {
        if (valid) {
            let res;
            if (title.value == "添加") {
                res = await VE_API.system.dictionaryEntityAdd(form);
            } else {
                res = await VE_API.system.dictionaryEntityEdit({
                    id: rowData.value.id,
                    ...form,
                });
            }
            const { code } = res;
            if (code == "00") {
                closeDialog();
            }
        } else {
            console.log("error submit!!");
            return false;
        }
    });
};
</script>

<style lang="scss" scoped></style>
